<template>
  <a-modal
    :visible="visible"
    title="选择部门/成员"
    cancelText="取消"
    okText="确认"
    @ok="submit"
    @cancel="cancel">
    <div class="content-box">
      <div class="left">
        <a-input-search
          placeholder="请输入员工名称"
          style="width: 200px"
          @search="onSearch" />
        <a-tree
          checkable
          checkStrictly
          show-line="true"
          :tree-data="state.powers"
          @check="onCheck"
          :replace-fields="state.powerReplaceFields"
          v-model:checkedKeys="state.checkedPowerIds"
        />
      </div>
      <div class="right">
        <div class="right-h">
          <span>已选&nbsp;{{`(${checkedLength})`}}</span>
          <span @click="handleDel">清空</span>
        </div>
        <div class="right-u" v-for="(item, index) in checkeds" :key="index">
          <span>{{item.title}}</span>
          <span ref="DEL" @click.stop="handleDelItem(item)">×</span>
        </div>
      </div>
    </div>
    
  </a-modal>
</template>
<script>
import { assign as powerTree } from "@/api/module/power";
import { power } from "@/api/module/role";
import { computed, defineComponent, reactive, watch } from "vue";
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
    },
    record: {
      type: Object,
    },
  },
  emit: ["close"],
  setup(props, context) {

    const state = reactive({
      powers: [],
      checkedPowerIds: {checked:[]},
      powerReplaceFields: { key: "id", title: 'title' },
      checkeds: []
    });

    const loadPower = async () => {
      var response = await powerTree();
      state.powers = response.data;
    };


    /// 监听数据
    watch(props, (props) => {
      let powerIds = [];
      power({ roleId: props.record.id }).then((response) => {
        response.data.forEach((element) => {
          powerIds.push(element.id);
        });
        state.checkedPowerIds = powerIds;
      });
    });
    // 中文搜索
    const onSearch = (value) => {
      console.log('value: onSearch', value);
    }
    // 树的复选框选中
    const onCheck = (checkedKeys, info) => {
      state.checkeds = info.checkedNodes.map(item => item.props)
    }
    // 清空
    const handleDel = () => {
      state.checkeds = []
      state.checkedPowerIds = { checked: [] }
    }
    // 单个删除
    const handleDelItem = (item) => {
      state.checkeds = state.checkeds.filter(row => row.key != item.key)
      const checkedarr = state.checkedPowerIds.checked.filter(row => row != item.key)
      state.checkedPowerIds = { checked: [...checkedarr]}
    }
    const checkeds = computed(() => {
      return state.checkeds
    })
    const checkedLength = computed(() => {
      return state.checkeds.length
    })
    loadPower();
    // 确认
    const submit = (e) => {
      cancel();
    };
    // 取消
    const cancel = (e) => {
      context.emit("close", false);
    };

    return {
      state,
      submit,
      cancel,
      onSearch,
      onCheck,
      checkeds,
      handleDelItem,
      handleDel,
      checkedLength,
    };
  },
});
</script>
<style lang="less" scoped>
.content-box {
  display: flex;
  flex-wrap: nowrap;
  max-height: 350px;
  .left {
    width: 49%;
    // border: 1px solid #d9d9d9;
    // border-radius: 3px;
    overflow-y: auto;
  }
  .right {
    width: 49%;
    // border: 1px solid #d9d9d9;
    // border-radius: 3px;
    overflow-y: auto;

    .right-h {
      background: #F5F5F5;
      display: flex;
      justify-content: space-between;
      padding: 5px 8px;
      border-radius: 3px;

      span:last-child {
        color: #ff4d4f;
        cursor: pointer;
      }

    }
    .right-u {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 3px 8px;
      overflow-y: auto;

      span:last-child {
        font-size: 18px;
        cursor: pointer;
      }
    }
  }
}
</style>